import { connect } from 'react-redux'
import Count from '../components/Count'
import { add, sub } from '../redux/actions'
// WithCount就是监听redux数据变化的父组件
// 1. connect第一次调用什么都不写,则Count组件通过props只能拿到一个dispatch方法,无法获取到redux数据
// 2. 如果Count组件需要获取redux中的数据,则需要在connect第一次调用的时候,传入一个函数.这个函数如下
// function mapStateToProps(state) {
//   // state是redux中所有数据，这个其实就是把Count需要的数据过滤出来，传递到Count的props上面
//   console.log(state)
//   return {
//     count: state.count,
//   }
// }
// 3. 如果不想再Count组件看到调用dispatch的代码,可以利用下面的函数,将调用dispatch的代码封装成一个新的函数,然后通过props传递给Count
// function mapDispatchToProps(dispatch) {
//   return {
//     xxx: function () {
//       dispatch(add())
//     },

//     yyy: function () {
//       dispatch(sub())
//     },
//   }
// }
// WithCount被称为容器组件
// 注意: 如果connect第一次调用的第二个参数,传入对象.则connect函数会自动帮我们创建mapDispatchToProps
// const WithCount = connect(mapStateToProps, { xxx: add, yyy: sub })(Count)
const WithCount = connect((state) => ({ count: state.count }), { add, sub })(
  Count
)
export default WithCount
